<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>洲际酒店集团</title>

<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<style>
*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
	font-family:Microsoft YaHei,Arial, Helvetica, Verdana, sans-serif; font-size:0;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, legend, button,form, input, textarea, th, td ,article ,aside, dialog, footer, header, section, footer, nav, figure, menu{ list-style:none;}

body{
	font-family:"microsoft yahei";
}
.swiper-container {
  /*  width: 320px;
    height: 480px;*/
	width: 100%;
    height: 100%;
}  

.swiper-slide{
	width:100%;
	height:100%;
}
img{
	display:block;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #555;
border:2px solid #fff;
opacity: .4; margin:6px 0;
border-radius: 90px;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes start {
	0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
	0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
	60% {opacity: 1;-moz-transform: translate(0,0);}
	100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
	0%,30% {opacity: 0;transform: translate(0,10px);}
	60% {opacity: 1;transform: translate(0,0);}
	100% {opacity: 0;transform: translate(0,-8px);}
}
.ani{
	position:absolute;
	}
.txt{
	position:absolute;
}
#array{
	position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;
}
</style>



</head>
<body>
<div style="display:none; position:absolute; z-index:0; left:-2000px;"><img src="images/share.jpg" width="400" height="400"></div>

<div class="swiper-container">
    <div class="swiper-wrapper">
    <!-------------slide1----------------->
<section class="swiper-slide swiper-slide1">
<img src="images/navBg2.jpg" class="ani resize" style="width:720px;height:1080px;left:0px;top:0px;z-index:1;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s"  > 

<div class="ani resize" style="width:155px;height:40px;left:40px;top:70px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s" ><img src="images/home_t1.png" style="width:100%;"></div>
<a href="activity.html" class="ani resize" style="width:138px;height:130px; left:40px;top:125px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><img src="images/nav_1.png" style="width:100%;"></a>
<a href="notice.html" class="ani resize" style="width:138px;height:130px; left:205px;top:125px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><img src="images/nav_2.png" style="width:100%;"></a>

<div class="ani resize" style="width:149px;height:36px;left:40px;top:290px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s"  ><img src="images/home_t2.png" style="width:100%;"></div>

<a href="new.html" class="ani resize" style="width:138px;height:130px; left:40px;top:345px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><img src="images/nav_3.png" style="width:100%;"></a>

<a href="knowledge.html" class="ani resize" style="width:138px;height:130px;left:205px;top:345px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s" ><img src="images/nav_4.png" style="width:100%;"></a>

<a href="#" class="ani resize" style="width:138px;height:130px;left:370px;top:345px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.1s"  ><img src="images/nav_5.png" style="width:100%;"></a>

<a href="about.html" class="ani resize"  style="width:138px;height:130px;left:535px;top:345px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.2s" ><img src="images/nav_6.png" style="width:100%;"></a>

<a href="#" class="ani resize" style="width:138px;height:130px;left:40px;top:490px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.3s" ><img src="images/nav_7.png" style="width:100%;"></a>


<div class="ani resize" style="width:150px;height:39px;left:40px;top:650px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.9s" ><img src="images/home_t3.png" style="width:100%;"></div>
<a href="contact.html" class="ani resize" style="width:138px;height:130px;left:40px;top:705px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s" swiper-animate-delay="0.9s" ><img src="images/nav_8.png" style="width:100%;"></a>
<a href="faq.html" class="ani resize" style="width:138px;height:130px;left:205px;top:705px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.4s" swiper-animate-delay="1s"><img src="images/nav_9.png" style="width:100%;"></a>
<a href="#" class="ani resize" style="width:138px;height:130px;left:370px;top:705px;z-index:3; overflow:hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.6s" ><img src="images/nav_10.png" style="width:100%;"></a>




</section>

<div class="pagination"></div>  
        
    </div>
</div>



<script>  

scaleW=window.innerWidth/720;
scaleH=window.innerHeight/1080;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
          }
		  
  var mySwiper = new Swiper ('.swiper-container', {
   direction : 'vertical',
   pagination: '.swiper-pagination',
   paginationClickable: true,
   nextButton: '.swiper-button-next',
  //virtualTranslate : true,
   mousewheelControl : true,
   onInit: function(swiper){
   swiperAnimateCache(swiper);
   swiperAnimate(swiper);
	  },
   onSlideChangeEnd: function(swiper){
	swiperAnimate(swiper);
    },
	onTransitionEnd: function(swiper){
	swiperAnimate(swiper);
    },
	
	
	watchSlidesProgress: true,

      onProgress: function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          var slide = swiper.slides[i];
          var progress = slide.progress;
          var translate = progress*swiper.height/4;  
		  scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
          var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
          slide.style.opacity = opacity;
		  es = slide.style;
		  es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';

        }
      },
	
	   onSetTransition: function(swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++){
          es = swiper.slides[i].style;
		  es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

        }
      },
	
	   })   

	         
  </script>
</body>
</html>